<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
/* 大的table */
table{margin: 10px auto; width: 80%; border: 1px solid #69c;border-collapse: collapse ;
}
/* td table 是后面的样式 */
table tr td,table tr th{height: 30px;border: 1px solid #69c;text-align: center;font-size: 12px;
}
.yellow{background:yellow ;}
.childdiv{height: 30px;line-height: 30px;}

</style>
<div id="app">
<table>
<tr>
<th><childtd >序号</childtd></th>
<th><childtd >名字</childtd></th>
<th><childtd >价格</childtd></td></th>


<tr>
<td><childtd >
<template>
	<button>{{add}}</button>
	<span>1</span>
	<button>{{del}}</button>
</template>
</childtd></td>

<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr>

<!-- <tr>
//下面分开
<td><childtd >
<template>
	<button>{{add}}</button>
	<span>1</span>
	<button>{{del}}</button>
</template>
</childtd></td>
//上面分开
<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr> -->

<tr>
</childtd></td>
<td><childtd >
<template>
	<button>{{add}}</button>
	<span>1</span>
	<button>{{del}}</button>
</template>
</childtd></td>

<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr>

<tr>
<td><childtd >1</childtd></td>
<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr>

<tr>
<td><childtd >1</childtd></td>
<td><childtd >测试4</childtd></td>
<td><childtd >40</childtd></td>
</tr>

</table>

</div>

</head>
<body>
<script>
Vue.component('childtd',{
props:["name"],
template:"<div v-bind:class='classObj' @mouseover='change()'@mouseout='change()'><slot></solt></div>",
data:function(){
return{
	childadd:"加",
	childdel:"减",
	choose:false
}	
},
computed:{
classObj:function(){
	return{
		yellow:this.choose,
		childdiv:true
	}
}
},
methods:{
change:function(){
	this.choose=!this.choose
}
}
})

new Vue({
el:"#app",
data:{
add:"+",
del:"-",
choose:false,
},
methods:{
change:function(){
	this.choose=!this.choose
}
}

})
</script>
</body>
</html>
